/**
 * Created by python on 18-11-10.
 */
var app = new Vue({
    el: "#app",
    data: {
        change: false,
        change_experience: false,
        change_education: false,
        change_skill: false,
        base,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        username: '',
        mobile: '',
        email: '',
        city: '',
        introduction: '',
        school: '',
        birth: '',
        education: '',
        experience: '',
        gender: 0,
        good_at: [],
        id: '',
        company: '',
        personurl: '',
        avatar: '',
        image: '',
    },
    computed: {},
    mounted: function () {
        this.show_user_detail()
    },
    methods: {
        // 修改用户教育经历 用户个人经历
         change_user_edu: function () {
            alert('开始发送请求')
            axios.patch(this.base + '/user/education/' + this.user_id + '/', {
                experience: this.experience,
                education: this.education,

            }, {
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
                withCredentials: true
            }).then(response => {
                // 修改成功
                alert("保存成功")
                this.change = false
                // this.show_user_detail()
            })
                .catch(error => {
                        // 修改失败
                        alert("请求失败")
                    }
                )
        },
        // 修改用户技能
        change_user_skill: function () {
            this.change_skill = true
        },
        cancel_skill: function () {
            this.change_skill = false
        },

        // 修改用户经历
        change_user_experince: function () {
            this.change_experience = true
        },
        cancel_ex: function () {
            this.change_experience = false
        },
        // 修改用户教育经历
        change_user_education: function () {
            this.change_education = true
        },
        cancel_edu: function () {
            this.change_education = false
        },
        // 获取头像
        getFile: function (event) {
             this.image = event.target.files[0];
            console.log(this.image);
        },
        // 上传头像
        submitForm: function (event) {
            event.preventDefault();
            let formData = new FormData();
            formData.append('image', this.image);
            formData.append('user_id', this.user_id);
            let config = {
              headers: {
                  'Authorization': 'JWT ' + this.token,
                  'Content-Type': 'multipart/form-data'
              }
            }
            axios.post(this.base + '/user/avatar/', formData, config)
                .then(response =>{
                    alert('图片上传成功')
                    window.location.reload()
                })
                .catch(error => {
                    alert('图片上传失败')
                })
        },
        // 用户详情编辑
        change_userdetail_info: function () {
            this.change = true
        },
        // 取消编辑
        cancel: function () {
            this.change = false
        },
        // 保存编辑
        change_user_info: function () {
            alert('开始发送请求')
            axios.patch(this.base + '/userdetails/' + this.user_id + '/', {
                mobile: this.mobile,
                email: this.email,
                city: this.city,
                birth: this.birth,
                gender: this.gender,
                username: this.username,
                personurl: this.personurl,
                experience: this.experience,
                education: this.education,

            }, {
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
                withCredentials: true
            }).then(response => {
                // 修改成功
                alert("保存成功")
                this.change = false
                // this.show_user_detail()
            })
                .catch(error => {
                        // 修改失败
                        alert("请求失败")
                    }
                )
        },
        // 显示用户详情资料
        show_user_detail: function () {
            // alert("请求成功")
            axios.get(this.base + '/userdetail/' + this.user_id + '/', {
                // 向后端传递JWT token的方法
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
            })
                .then(response => {
                    // 加载用户数据
                    console.log(response.data.good_at)
                    this.username = response.data.username;
                    this.city = response.data.city;
                    this.introduction = response.data.introduction;
                    this.mobile = response.data.mobile;
                    this.email = response.data.email;
                    this.school = response.data.school;
                    this.avatar = response.data.avatar;
                    this.birth = response.data.birth;

                    this.education = response.data.education;
                    this.experience = response.data.experience;
                    if (response.data.gender == "0") {
                        this.gender = "男"
                    } else {
                        this.gender = "女"
                    }
                    this.good_at = response.data.good_at;
                    this.id = response.data.id;
                    this.company = response.data.company;
                    this.personurl = response.data.personurl;
                })
                .catch(error => {
                    if (error.response.status == 400) {
                        alert("浏览器错误")
                    } else {
                        alert("服务器错误")
                    }
                    // this.error_pwd = true;
                })
        }
    },
    filters: {
        // date2year: function (birth) {
        //     return birth.getHours()
        // }
    }

})